<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
let routers = useRouter()

const activeName = ref('first')

const handleClick = (tab, event) => {
    console.log(tab, event)
}

let toaccount = () => {
    routers.push('/account')
}
</script>

<template>
    <div>
        <div class="container">
            <!-- 标题 -->
            <div class="top-box">
                <div class="toptext">
                    <span id="toaccount" @click="toaccount">账号</span>
                    <svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false"
                        style="height: 10px; width: 10px; fill: rgb(118, 118, 118);">
                        <path
                            d="m4.29 1.71a1 1 0 1 1 1.42-1.41l8 8a1 1 0 0 1 0 1.41l-8 8a1 1 0 1 1 -1.42-1.41l7.29-7.29z"
                            fill-rule="evenodd"></path>
                    </svg>
                    <span id="right">付款和收款</span>
                </div>
                <div class="bottomtext">付款和收款</div>
            </div>

            <!-- 标签页 -->
            <div class="window">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="付款" name="first">
                        <div class="yourpay-box">
                            <div>
                                <div class="yourpay">你的付款</div>
                                <div>跟踪所有付款和退款。</div>
                                <el-button color="#000" :dark="isDark" class="pay-btn" size="large">管理付款</el-button>
                            </div>
                            <div class="window-right">
                                <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                    role="presentation" focusable="false"
                                    style="display: block; height: 48px; width: 48px; fill: rgb(227, 28, 95); stroke: currentcolor;">
                                    <g>
                                        <g stroke="none">
                                            <path
                                                d="m41.999 10v24h-4.287l1.01-.6546823c.242375-.158375.3706719-.3933125.3998895-.6646172l.0064994-.1183828c.004513-1.4230639-2.4648559-3.6737529-5.4115565-1.9238459l-.1928324.1198459-5.278 3.2416823-2.2539866.0005578c.1712874-1.0118843-.1666572-1.9090959-.8837185-1.9909612l-.1084949-.0060789-19.0018-.0005177.001-22.003z"
                                                fill-opacity=".2"></path>
                                            <path
                                                d="m44 6c1.0543618 0 1.9181651.81587779 1.9945143 1.85073766l.0054857.14926234v28c0 1.0543618-.8158778 1.9181651-1.8507377 1.9945143l-.1492623.0054857h-12.446l3.079-2h9.367v-28h-40v24.0033177c-.51283584 0-.93550716.3860402-.99327227.8833788l-.00672773.1166212-.00007248 4.729076c-.55177975-.3192182-.93689844-.8944853-.9928825-1.5633277l-.00704502-.169066v-28c0-1.0543618.81587779-1.91816512 1.85073766-1.99451426l.14926234-.00548574zm-20 9c3.8659932 0 7 3.1340068 7 7s-3.1340068 7-7 7-7-3.1340068-7-7 3.1340068-7 7-7zm0 2c-2.7614237 0-5 2.2385763-5 5s2.2385763 5 5 5 5-2.2385763 5-5-2.2385763-5-5-5zm-15-5c.55228475 0 1 .4477153 1 1s-.44771525 1-1 1-1-.4477153-1-1 .44771525-1 1-1z">
                                            </path>
                                        </g>
                                        <g fill="none" stroke-width="2">
                                            <path
                                                d="m24.9998 32.0035177c1.3716282 0 1.5099129 2.8120004-.3683588 4.2183752l8.8925588-5.4635752c3.031-1.968 5.609.35 5.6043889 1.804-.0013889.321-.1293889.602-.4063889.783l-17.2344901 11.1920163c-.947203.6151103-2.110299.8011277-3.2021.5121216l-14.54130246-3.8491683c-.43862489-.1161066-.74410744-.5129735-.74410744-.9667052v-7.2302644c0-.5522848.44771525-1 1-1z">
                                            </path>
                                            <path
                                                d="m13.9998 37.0035177h8.051c1.2682235 0 2.2021119-.4127594 2.8457108-1.0010914">
                                            </path>
                                        </g>
                                    </g>
                                </svg>
                                <div class="payall">通过爱彼迎支付所有款项</div>
                                <p>请通过爱彼迎平台付款和沟通交流，确保您始终受到<span>爱彼迎服务条款</span>、<span>付款服务条款</span>、取消政策和其他安全政策的保护。<span>了解详情</span>
                                </p>
                            </div>
                        </div>
                        <div class="type-box">
                            <div class="paytype">付款方式</div>
                            <div>使用我们的安全支付系统添加付款方式后，就能开始计划下一趟行程了。</div>
                            <el-button color="#000" :dark="isDark" class="type-btn" size="large">添加付款方式</el-button>
                        </div>
                        <div class="gift-box">
                            <div class="gift">爱彼迎礼品卡基金</div>
                            <div>兑换礼品卡并查看旅行基金余额。<span id="tips">须遵守相关条款</span></div>
                            <div class="balance">
                                <div>当前旅行基金余额</div>
                                <div>$0.00</div>
                            </div>
                            <el-button color="#000" :dark="isDark" class="gift-btn" size="large">添加礼品卡</el-button>
                        </div>
                        <div class="ticket-box">
                            <div class="ticket">礼金券</div>
                            <div>有礼金券可供使用！ 马上开始规划下一趟行程吧。</div>
                            <el-button color="#000" :dark="isDark" class="ticket-btn" size="large">礼金券中心</el-button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="收款" name="second">
                        <div class="collect-box">
                            <div>
                                <div class="collect">选择收款方式</div>
                                <p>请添加至少一种收款方式，告知我们应将你的收入发放至何处。</p>
                                <el-button color="#000" :dark="isDark" class="collect-btn" size="large">设置收款方式
                                </el-button>
                            </div>
                            <div class="help">
                                <div class="help-title">需要帮助吗？</div>
                                <div class="option">
                                    <div>收款到账时间</div>
                                    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                        role="presentation" focusable="false"
                                        style="display: block; fill: none; height: 16px; width: 16px; stroke: currentcolor; stroke-width: 4; overflow: visible;">
                                        <g fill="none">
                                            <path
                                                d="m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932">
                                            </path>
                                        </g>
                                    </svg>
                                </div>
                                <div class="option">
                                    <div>如何收款</div>
                                    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                        role="presentation" focusable="false"
                                        style="display: block; fill: none; height: 16px; width: 16px; stroke: currentcolor; stroke-width: 4; overflow: visible;">
                                        <g fill="none">
                                            <path
                                                d="m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932">
                                            </path>
                                        </g>
                                    </svg>
                                </div>
                                <div class="option">
                                    <div>前往交易记录</div>
                                    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                        role="presentation" focusable="false"
                                        style="display: block; fill: none; height: 16px; width: 16px; stroke: currentcolor; stroke-width: 4; overflow: visible;">
                                        <g fill="none">
                                            <path
                                                d="m12 4 11.2928932 11.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136l-11.2928932 11.2928932">
                                            </path>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="税费" name="third">
                        <div class="info-box">
                            <div class="info-text">
                                <div class="info">纳税人信息</div>
                                <p>大多数国家/地区都要求其居民、房东/房屋管家或两种身份兼备的纳税人提供税务信息。<span>了解详情</span></p>
                                <el-button color="#000" :dark="isDark" class="info-btn" size="large">添加税务信息
                                </el-button>
                            </div>
                            <div class="info-window">
                                <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                    role="presentation" focusable="false"
                                    style="display: block; height: 48px; width: 48px; fill: rgb(227, 28, 95); stroke: currentcolor;">
                                    <g stroke="none">
                                        <path
                                            d="m9.1 6h29.8c.0552285 0 .1.04477153.1.1v33.2381966c0 .0552285-.0447715.1-.1.1-.0155245 0-.0308358-.0036145-.0447214-.0105573l-2.8105572-1.4052786c-.0281528-.0140764-.06129-.0140764-.0894428 0l-5.9105572 2.9552786c-.0281528.0140764-.06129.0140764-.0894428 0l-5.9105572-2.9552786c-.0281528-.0140764-.06129-.0140764-.0894428 0l-5.9105572 2.9552786c-.0281528.0140764-.06129.0140764-.0894428 0l-5.9105572-2.9552786c-.0281528-.0140764-.06129-.0140764-.0894428 0l-2.81055724 1.4052786c-.04939785.0246989-.10946515.0046765-.13416408-.0447213-.00694277-.0138856-.01055728-.0291969-.01055728-.0447214v-33.2381966c0-.05522847.04477153-.1.1-.1z"
                                            fill-opacity=".2"></path>
                                        <path
                                            d="m41.9 2c.5670123 0 1.0338239.4290107 1.0935453.98014288l.0064547.11985712v41.7381966c0 .6075132-.4924868 1.1-1.1 1.1-.1280772 0-.2548352-.0223648-.374647-.065766l-.117288-.0503641-5.409065-2.7050665-5.507065 2.7550665c-.2322602.1161301-.4953618.1451626-.7430427.0870976l-.1223412-.0362907-.1184861-.0508069-5.508065-2.7550665-5.508065 2.7550665c-.2322602.1161301-.4953618.1451626-.7430427.0870976l-.1223412-.0362907-.1184861-.0508069-5.508065-2.7550665-5.40806504 2.7050665c-.46813963.2340698-1.0233925.1030016-1.34191782-.2852576l-.0745121-.1023605-.05937495-.1043168c-.05727787-.1145558-.09396211-.2379334-.10872436-.3645059l-.00740573-.1274291v-41.7381966c0-.56701234.4290107-1.03382387.98014288-1.09354535l.11985712-.00645465zm-.9 2h-34v39.381l4.508065-2.2530665c.2322602-.1161301.4953618-.1451626.7430427-.0870976l.1223412.0362907.1184861.0508069 5.508065 2.7540665 5.508065-2.7540665c.2322602-.1161301.4953618-.1451626.7430427-.0870976l.1223412.0362907.1184861.0508069 5.508065 2.7540665 5.508065-2.7540665c.2322602-.1161301.4953618-.1451626.7430427-.0870976l.1223412.0362907.1184861.0508069 4.508065 2.2540665zm-9 23v2h-16v-2zm0-6v2h-16v-2zm0-6v2h-16v-2z">
                                        </path>
                                    </g>
                                </svg>
                                <div class="where">我的增值税收据在哪里？</div>
                                <p>预订商务差旅的住所后，您可以在预订确认电子邮件中找到增值税收据的链接。<span>了解更多。</span></p>
                            </div>
                        </div>
                        <div class="tax-box">
                            <div class="tax">增值税</div>
                            <p>如果您已登记增值税，或您的旅程属于商务差旅，您可能无需支付爱彼迎服务费的增值税。 首先，请输入贵公司的增值税号码。<span>进一步了解增值税。</span></p>
                            <el-button color="#000" :dark="isDark" class="tax-btn" size="large">添加增值税号
                            </el-button>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
// 标签页
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.container {
    margin: 0 auto;
    width: 68%;
    color: rgb(72, 72, 72);

    .top-box {
        margin-bottom: 50px;

        .toptext {
            font-size: 14px;
            font-weight: 600;

            #toaccount:hover {
                text-decoration: underline;
                cursor: pointer;
            }

            span {
                margin: 10px;
                margin-left: 0;
            }

            #right {
                margin-left: 10px;
            }
        }

        .bottomtext {
            font-size: 32px;
            font-weight: 800;
            margin: 10px;
            margin-left: 0;
        }
    }

    .window {
        .yourpay-box {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;

            .yourpay {
                color: rgb(34, 34, 34);
                font-size: 22px;
                font-weight: 800;
                margin-bottom: 8px;
            }

            .pay-btn {
                font-size: 16px;
                font-weight: 800;
                border-radius: 8px;
                height: 46px;
                margin-top: 20px;
            }

            .window-right {
                width: 300px;
                height: 160px;
                border: 1px solid rgb(221, 221, 221);
                padding: 20px;
                color: rgb(34, 34, 34);
                border-radius: 8px;

                .payall {
                    font-size: 16px;
                    font-weight: 600;
                    margin-top: 20px;
                }

                p {
                    font-size: 14px;

                    span {
                        font-weight: 600;
                        text-decoration: underline;
                        cursor: pointer;
                    }
                }
            }
        }

        .type-box {
            margin-top: 10px;

            .paytype {
                color: rgb(34, 34, 34);
                font-size: 22px;
                font-weight: 800;
                margin-bottom: 8px;
            }

            .type-btn {
                font-size: 16px;
                font-weight: 800;
                border-radius: 8px;
                height: 46px;
                margin-top: 20px;
            }
        }

        .gift-box {
            margin-top: 70px;

            .gift {
                color: rgb(34, 34, 34);
                font-size: 22px;
                font-weight: 800;
                margin-bottom: 8px;
            }

            #tips {
                font-weight: 600;
                color: #000;
                text-decoration: underline;
                cursor: pointer;
            }

            .balance {
                display: flex;
                justify-content: space-between;
                width: 500px;
                border-top: 1px solid rgb(221, 221, 221);
                border-bottom: 1px solid rgb(221, 221, 221);
                padding: 20px 0;
                margin: 20px 0;
            }

            .gift-btn {
                font-size: 16px;
                font-weight: 800;
                border-radius: 8px;
                height: 46px;
                margin-top: 10px;
            }
        }

        .ticket-box {
            margin-top: 70px;

            .ticket {
                color: rgb(34, 34, 34);
                font-size: 22px;
                font-weight: 800;
                margin-bottom: 8px;
            }

            .ticket-btn {
                font-size: 16px;
                font-weight: 800;
                border-radius: 8px;
                height: 46px;
                margin-top: 20px;
            }
        }

        .collect-box {
            display: flex;
            justify-content: space-between;

            .collect {
                color: rgb(34, 34, 34);
                font-size: 26px;
                font-weight: 800;
                margin-bottom: 8px;
            }

            .collect-btn {
                font-size: 16px;
                font-weight: 800;
                border-radius: 8px;
                height: 46px;
                margin-top: 20px;
            }

            .help {
                border: 1px solid rgb(221, 221, 221);
                border-radius: 8px;
                width: 300px;
                height: 160px;
                padding: 20px;

                .help-title {
                    font-size: 18px;
                    font-weight: 800;
                    color: rgb(34, 34, 34);
                }

                .option {
                    display: flex;
                    justify-content: space-between;
                    cursor: pointer;
                    color: rgb(34, 34, 34);
                    font-size: 14px;
                    font-weight: 600;
                    text-decoration: underline;
                    margin-top: 24px;
                }
            }
        }

        .info-box {
            display: flex;
            justify-content: space-between;

            .info-text {
                border-bottom: 1px solid rgb(221, 221, 221);
                padding-bottom: 40px;
                margin-top: 20px;

                .info {
                    color: rgb(34, 34, 34);
                    font-size: 26px;
                    font-weight: 800;
                    margin-bottom: 8px;
                }

                p {
                    span {
                        color: #222;
                        font-weight: 800;
                        text-decoration: underline;
                        cursor: pointer;
                    }
                }

                .info-btn {
                    font-size: 16px;
                    font-weight: 800;
                    border-radius: 8px;
                    height: 46px;
                    margin-top: 20px;
                }
            }



            .info-window {
                width: 300px;
                height: 140px;
                border: 1px solid rgb(221, 221, 221);
                border-radius: 8px;
                padding: 20px;
                margin-left: 80px;

                .where {
                    font-size: 16px;
                    color: #484848;
                    font-weight: 800;
                }

                p {
                    font-size: 14px;

                    span {
                        color: #222;
                        font-weight: 800;
                        text-decoration: underline;
                        cursor: pointer;
                    }
                }
            }
        }

        .tax-box {
            margin-top: 20px;
            width: 640px;

            .tax {
                color: rgb(34, 34, 34);
                font-size: 26px;
                font-weight: 800;
                margin-bottom: 8px;
            }

            .tax-btn {
                font-size: 16px;
                font-weight: 800;
                border-radius: 8px;
                height: 46px;
                margin-top: 20px;
            }

            p {
                span {
                    color: #222;
                    font-weight: 800;
                    text-decoration: underline;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>